<template>
  <div>
    <h2>Home</h2>

      <h3>声明式(push)</h3>
      <router-link to="/home/course">
        <button>Course</button>
      </router-link>  &nbsp;
      <router-link to="game">Game</router-link>&nbsp;
      <router-link to="/Home/News" active-class="active">News</router-link>

      <h3>声明式(replace)</h3>
      <router-link :to="{path: '/home/course'}" replace>Course</router-link>&nbsp;
      <router-link :to="{path: 'game'}" replace>Game</router-link>&nbsp;
      <router-link :to="{name: 'News'}" replace>News</router-link>

      <h3>编程式(push)</h3>
      <button @click="$router.push('/home/course')">Course</button>
      <button @click="$router.push('game')">Game</button>
      <button @click="$router.push('/home/News')">News</button>
      
      <h3>编程式(replace)</h3>
      <button @click="$router.replace({path: '/home/course'})">Course</button>
      <button @click="$router.replace({path: 'game'})">Game</button>
      <button @click="$router.replace({name: 'News'})">News</button>

    <hr>
    <!-- 缓存对应的所有路由组件 -->
    <!-- <keep-alive include="Game"> -->
    <!-- <keep-alive :include="['Game', 'News']"> -->
    <!-- <keep-alive :exclude="['Game', 'News']"> -->
    <!-- <keep-alive :max="2"> -->
    <keep-alive>
      <!-- 在此显示二级子路由组件界面 -->
      <router-view></router-view>
    </keep-alive>
    
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style scoped>
  .router-link-active {
    color: red;
  }
  .active {
    color: blueviolet;
  }
  .active2 {
    color: blue;
  }
</style>
